@charset 'UTF-8';
@import './common.scss';
@import '../fonts/iconfont.css';

.web{
	scroll-behavior: smooth;
	main{
		perspective: 3px;
		
		
		.bg{
			background-size: cover;
			// width: 100vw;
			width: 100%;
			height: 100%;
			z-index: -2;
			background-attachment: fixed;
			// background-image: url("../images/1.jpg");
			position: absolute;
		}	
		.top{
			.imgBox{
				margin: 0 auto;
				width: 77vw;
				height: 38vw;
				overflow: hidden;
				img{
					width: 100%;
				}
			}
		}
		.center{
			margin: 0 auto;
			padding-top: 9vw;
			width: 77vw;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.imgBox{
				width: 44vw;
				height: 22vw;
				overflow: hidden;
				padding-bottom: 6vw;
				img{
					width: 100%;
				}
			}
			.content{
				width: 30vw;
				h2{
					font-size: 3vw;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0vw;
					color: #000000;
					padding-top: 2vw;
					padding-bottom: 2vw;
				}
				p{
					font-size: 1vw;
					font-weight: normal;
					font-stretch: normal;
					line-height: 1.5vw;
					letter-spacing: 0vw;
					color: #262626;
					padding-bottom: 4vw;
					text-align: justify;
				}
				a{
					display: block;
					font-size: 1vw;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0vw;
					color: #000000;
					width: 16vw;
					border: 1px solid #202020;
					text-align: center;
					padding: 0.7vw 0;
				}
			}
		}
		.bottom{
			width: 100%;
			height: 45.5vw;
			background-image: url(../images/contactbg.png);
			background-repeat: no-repeat;
			background-size: cover;
		}
	}
}

@media screen and (max-width:767px) {
	.web{
		main{
			
			.top{
				// width: 90%;
				.imgBox{
					width: 90%;
				}
			}
			.center{
				display: block;
				position: relative;
				.imgBox:nth-child(1){
					width: 48vw;
					margin: 0 auto;
					padding-bottom: 4vw;
				}
				.content:nth-child(2){
					margin: 0 auto;
					width: 45vw;
					
					h2{
						padding-top: 0;
						text-align: center;
						
					}
					p{
						line-height: 4vw;
					}
					a{
						padding-left: 0.8vw;
						padding-right: 0.8vw;
						margin: 0 auto;
					}
				}
				.content:nth-child(3){
					margin: 0 auto;
					width: 45vw;
					padding-top: 32vw;
					// padding-bottom: 6vw;
					h2{
						padding-top: 0;
						text-align: center;
						// margin-top: -6vw;
					}
					p{
						line-height: 4vw;
					}
					a{
						padding-left: 0.8vw;
						padding-right: 0.8vw;
						margin: 0 auto;
					}
				}
				.imgBox:nth-child(4){
					width: 48vw;
					position: absolute;
					bottom: 47vw;
					left: calc(50% - 24vw);
				}
			}
			.bottom{
				margin-top: 6vw;
			}
		}
	}
}